<template>
    <div>
        <a-card class="mb1 filterForm">
            <a-form layout="inline" :model="filterForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                <a-form-item label="用户">
                    <a-input v-model:value="filterForm.accout" />
                </a-form-item>
                <a-form-item label="测量时间">
                    <a-range-picker v-model:value="filterForm.date" />
                </a-form-item>
                <a-form-item >
                    <a-button type="primary" @click="filterData">搜索</a-button>
                </a-form-item>
            </a-form>
        </a-card>
        <a-table :columns="columns" :data-source="tableData" :pagination="pagination">
            <template #time="{ text }">{{$filters.formatTime(text)}}</template>
            <template #action="{ record }">
                <span>
                    <a @click="deleteRecord(record.id)">删除</a>
                    <a-divider type="vertical" />
                    <a>详细</a>
                </span>
            </template>
        </a-table>
    </div>
</template>
<script lang="ts">
import { defineComponent,reactive, toRefs,computed,UnwrapRef,toRaw,createVNode} from 'vue';
import { Modal,message } from 'ant-design-vue';
interface filterState{  //筛选字段
    name:string,
    age:number|undefined,
    address:string
}
interface dataType{ //其他类型设置
    current:number,
    total:number,
}
interface FormState{   //提交表格限制
    
}

const columns = [
    {title: 'id',align:"center",dataIndex: 'id',key: 'id',},
    {title: '用户名',align:"center",dataIndex: 'username',key: 'username'},
    {title: '身高',align:"center",dataIndex: 'height',key: 'height',},
    {title: '体重(kg)',align:"center",key: 'weight',dataIndex: 'weight'},
    {title: '体脂',align:"center",key: 'bodyfat',dataIndex: 'bodyfat'},
    {title: 'BMI',align:"center",key: 'bmi',dataIndex: 'bmi'},
    {title: '骨量',align:"center",key: 'bone',dataIndex: 'bone'},
    {title: '测量时间',align:"center",key: 'createTime',dataIndex: 'createTime',slots: { customRender: 'time' }},
    {title: '操作',align:"center",key: 'action',slots: { customRender: 'action' }},
];

const tableData:object[] = [];
for (let i = 0; i < 30; i++) {
    tableData.push({
        id: i+1,
        username: "何文飞",
        height: 172,
        weight:120,
        bodyfat:34,
        bmi: 120,
        bone:"45%",
        createTime:1623059908
    })
}

export default defineComponent({
    setup() {
        const data=reactive<dataType>({
            current: 1,
            total:0,
        })
        const filterForm:UnwrapRef<filterState>=reactive({  //筛选表格
            name:"",
            age:undefined,
            address:""
        })

        const formData:UnwrapRef<FormState>=reactive({})  //提交表格
        const rules = {
            name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
            age: [{ required: true, message: '请输入年纪', trigger: 'blur' }],
            address: [{ required: true, message: '请选择地址', trigger: 'change', type: 'object' }],
        }

        const filterData=()=>{     //筛选操作
            console.log(toRaw(filterForm))
        }
        const deleteRecord=(id:number)=>{
            Modal.confirm({
                title: '温馨提示?',
                icon: createVNode(ExclamationCircleOutlined),
                content: '确定删除该项记录吗？',
                onOk() {
                    message.success('删除成功!') 
                },
            });
        }

        const refData=toRefs(data)
        const pagination=computed(()=>({
            total: 100,
            current: 1,
            pageSize:30,
        }))
        return {
            ...refData,
            columns,
            tableData,
            pagination,
            filterForm,

            formData,
            rules,

            deleteRecord,
            filterData
        };
    },
});
</script>
<style lang="scss" scoped>

</style>

